<template>
	<view class="receiver flex flex--row">
		<view class="receiver_box flex flex--row flex--align-items--center">
			<view class="receiver_box_title flex flex--align-items--center flex--justify-content--center">
				<image src="../../static/image/notice.png" mode="" />
				填写基本信息
			</view>
			<view class="receiver_box_com flex" style="gap: 25px;" >
				<view class="index_box_title">你的昵称</view>
				<view class="receiver_box_com_con flex flex--align-items--center" style="flex: 2;">
					<input type="text" placeholder="给自己一个好听的昵称" v-model="user_nickname" style="text-indent: 2em;width: 100%;" />
				</view>
			</view>
			
			<view class="receiver_box_com">
				<view class="index_box_title">你的生日</view>
				<view class="receiver_box_com_con flex flex--align-items--center">
					<view class="receiver_box_com_con_left">
						<picker mode="date" :value="date" @change="bindDateChange">
							<view style="width: 100%;">{{date}}</view>
						</picker>
					</view>
					<view class="receiver_box_com_con_right">{{listing || '星座'}}</view>
				</view>
			</view>
			<!-- 你的身高 -->
			<view class="receiver_box_com">
				<view class="index_box_title">你的身高</view>
				<view class="receiver_box_com_con flex flex--align-items--center">
					<input class="receiver_box_com_con_left" type="number" placeholder="请输入您的身高" v-model="heights" />
					<view class="receiver_box_com_con_right">cm</view>
				</view>
			</view>
			<!-- 你的体重 -->
			<view class="receiver_box_com">
				<view class="index_box_title">你的体重</view>
				<view class="receiver_box_com_con flex flex--align-items--center">
					<input class="receiver_box_com_con_left" type="number" placeholder="请输入您的体重" v-model="weight" />
					<view class="receiver_box_com_con_right">kg</view>
				</view>
			</view>
			<view class="receiver_box_com">
				<view class="index_box_title">你的简介</view>
				<view style="background: #F8F8F8;position: relative;">
					<textarea maxlength="30" style="padding: 20rpx;height: 150rpx;" placeholder="请输入您的简介"
						v-model="details">
					</textarea>
					<view style="position: absolute;right: 2%;bottom:10%;color: #777474;">{{30-details.length}}</view>
				</view>
			</view>
			<view class="receiver_box_pation">
				<view class="index_box_title">你的性别</view>
				<view class="receiver_box_pation_con flex flex--wrap">
					<view class="box_pation_con_list" :class="{ 'active': sexIndex === index }"
						v-for="(item,index) in sexList" :key="item.id" @click="setSex(index,item.id)">{{ item.title }}
					</view>
				</view>
			</view>
			<!-- 标签设置 -->
			<view class="modify_com">
				<view class="index_box_title">标签设置</view>
				<view class="index_box_con flex flex--wrap" style="gap:15rpx">
					<view @tap="changeLabelInfo(item.id)" v-for="(item,index) in labelList" :key="item.id"
						class="index_box_con_list" :class="{'index_box_con_list_active': item.isShow}">
						{{ item.title }}
					</view>
				</view>
			</view>

			<!-- 你的职业 -->
			<view class="receiver_box_pation">
				<view class="index_box_title">我擅长</view>
				<view class="receiver_box_pation_con flex flex--wrap">
					<view class="box_pation_con_list" :class="{ 'active': pationIndex === index }"
						v-for="(item,index) in jobList" :key="item.id" @click="setPation(index,item.title)">
						{{ item.title }}</view>
					<input class="box_pation_con_list" style="background: #FA97B4;color: #fff;" type="text"
						placeholder="自定义" placeholder-style="color: #fff;" />
				</view>
			</view>
			<!-- 个人简介 -->
			<view class="receiver_box_pation">
				<view class="index_box_title">个人简介</view>
				<view class="receiver_box_pation_con flex flex--wrap">
					<view class="box_pation_con_list" :class="{ 'active': item.isShow  }"
						v-for="(item,index) in detailList" :key="item.id" @click="setDetail(index,item.title)">
						{{ item.title }}</view>
				</view>
				<!-- <textarea
					class="box_text_con"
					placeholder="请输入你的个人简介，让别人记住你哈。"
					v-model="text"
				/> -->
			</view>
			<view class="receiver_box_btn" @click="setNext">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelList: [],
				date: '2021-05-25',
				heights: '',
				weight: '',
				user_nickname:'',
				pationIndex: 0,
				pationText: '',
				listing: '',
				details: "",
				jobList: [],
				sexList: [{
						id: 1,
						title: '男'
					},
					{
						id: 2,
						title: '女'
					}
				],
				sexIndex: 0,
				sex: 1,
				detailList: [],
				detailText: ''
			}
		},
		onLoad() {
			this.getListing('5.25')
			// this.getJob()
			// this.getDetail()
			// this.getLabel()
			this.getLits()
		},
		methods: {
			// //获取标签列表
			// async getLabel() {
			// 	var that = this
			// 	const data = await this.$http('/appapi/tagsdo/lists')
			// 	data.forEach((v) => {
			// 		v['isShow'] = false
			// 	})
			// 	console.log(this.labelList)
			// 	this.labelList = data
			// },
			// // 获取个人简介
			// async getDetail() {
			// 	const data = await this.$http('/appapi/tags_detail/lists')
			// 	data.forEach(v => v['isShow'] = false)
			// 	this.detailList = data
			// },
			// // 获取职业标签
			// async getJob() {
			// 	const data = await this.$http('/appapi/tags_job/lists')
			// 	this.pationText = data[0].title
			// 	this.jobList = data
			// },
			
			async getLits(){
				const data = await this.$http('/appapi/system/get_lists')

				let TagsDetailLust=data.TagsDetail
				TagsDetailLust.forEach(v => v['isShow'] = false)
				this.detailList = TagsDetailLust

				let TagJob=data.TagsJob
				this.pationText = TagJob[0].title
				this.jobList = TagJob

				let Tagsdo=data.Tagsdo
				Tagsdo.forEach((v) => {
					v['isShow'] = false
				})
				this.labelList = Tagsdo
			},
			// 获取年月日
			bindDateChange(e) {
				this.date = e.target.value
				let date = this.date.split('-')
				date[1] = parseInt(date[1]) < 10 ? date[1].split('')[1] : date[1]
				date[2] = parseInt(date[2]) < 10 ? date[2].split('')[1] : date[2]
				let newDate = date[1] + '.' + date[2]
				this.getListing(newDate)
			},
			// 获取星座
			async getListing(newDate) {

				if (!newDate) {
					this.listing = false;
					return;
				}
				newDate = parseFloat(newDate);
				var data = false;
				if (newDate >= 1.2 && newDate <= 2.18) {
					data = "水瓶座";
				} else if (newDate >= 2.19 && newDate <= 3.2) {
					data = "双鱼座";
				} else if (newDate >= 3.21 && newDate <= 4.19) {
					data = "白羊座";
				} else if (newDate >= 4.2 && newDate <= 5.2) {
					data = "金牛座";
				} else if (newDate >= 5.21 && newDate <= 6.21) {
					data = "双子座";
				} else if (newDate >= 6.22 && newDate <= 7.22) {
					data = "巨蟹座";
				} else if (newDate >= 7.23 && newDate <= 8.22) {
					data = "狮子座";
				} else if (newDate >= 8.23 && newDate <= 9.22) {
					data = "处女座";
				} else if (newDate >= 9.23 && newDate <= 10.23) {
					data = "天秤座";
				} else if (newDate >= 10.24 && newDate <= 11.22) {
					data = "天蝎座";
				} else if (newDate >= 11.23 && newDate <= 12.21) {
					data = "射手座";
				} else if (newDate >= 12.22 || newDate <= 1.19) {
					data = "摩羯座";
				}
				console.log(newDate, data);
				console.log("------------------------星座信息-------------------------------");
				if (data) {
					this.listing = data
				}
			},
			// 选择标签
			setPation(index, title) {
				this.pationIndex = index
				this.pationText = title
			},
			setSex(index, id) {
				this.sex = id
				this.sexIndex = index
			},
			setDetail(index, title) {
				this.detailList[index].isShow = !this.detailList[index].isShow
				let arr = []
				this.detailList.forEach(v => {
					if (v.isShow) {
						arr.push(v.title)
					}
				})
				this.detailText = arr.join(',')
			},
			// 下一步
			setNext() {
				if (this.heights === '') {
					this.showToasts('请输入身高')
					return
				}
				if (this.weight === '') {
					this.showToasts('请输入体重')
					return
				}
				if (this.text === '') {
					this.showToasts('请输入简介')
					return
				}
				if(this.user_nickname===''){
					this.showToasts('请输入昵称')
					return
				}
				let resList = []
				console.log("打印还需要保留的")
				var tempLabelList = this.labelList
				tempLabelList.forEach((v) => {
					if (v.isShow == true) {
						console.log(v.id)
						resList.push(v.id)
					}
				})
				
				let data = {
					birthday: this.date,
					height: this.heights,
					weight: this.weight,
					job: this.pationText,
					intro: this.detailText,
					conste: this.listing,
					sex: this.sex,
					details: this.details,
					user_nickname:this.user_nickname,
					label:resList
				}
				this.$store.commit('setApplyData', data)
				uni.navigateTo({
					url: '/pages/applyImage/applyImage?data=' + JSON.stringify(data)
				})
			},
			showToasts(title) {
				uni.showToast({
					title: title,
					icon: 'none'
				})
			},
			changeLabelInfo(id) {
				console.log("改变label标签列表")
				console.log("当前需要取绑定的idw为" + id)
				var tempLabelList = this.labelList
				tempLabelList.forEach((v) => {
					if (v.id == id) {
						v['isShow'] = !v['isShow']
					}
				})
				//临时取消后 显示完整的label id信息
				this.labelList = tempLabelList
			},
		}
	}
</script>

<style lang="less" scoped>
	.index_box_title {
		width: 186rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		background: #F8C4D4;
		font-size: 28rpx;
		border-radius: 10rpx;
		color: #fff;
		margin: 30rpx 0;
	}

	.receiver {
		height: 100%;

		.receiver_box {
			flex: 1;
			overflow: auto;
			padding: 34rpx 22rpx 0 22rpx;

			.receiver_box_title {
				width: 392rpx;
				height: 94rpx;
				background: #FDFDFD;
				border: 6rpx solid #F3F3F3;
				font-size: 28rpx;
				color: #FF4E4E;
				margin-bottom: 28rpx;
				flex-shrink: 0;

				image {
					width: 80rpx;
					height: 46rpx;
					margin-right: 48rpx;
				}
			}

			.receiver_box_com {
				width: 100%;

				.receiver_box_com_con {
					height: 88rpx;
					background: #F8F8F8;
					position: relative;

					view {
						width: 50%;
						text-align: center;
						font-size: 36rpx;
					}

					.receiver_box_com_con_left {
						text-align: center;
						color: #2F2F2F;
					}

					.receiver_box_com_con_right {
						color: #FA97B4;
					}

					&::after {
						content: '';
						width: 2rpx;
						height: 24rpx;
						background: #E5E5E5;
						position: absolute;
						left: 50%;
					}
				}
			}

			.receiver_box_pation {
				width: 100%;

				.receiver_box_pation_con {
					.box_pation_con_list {
						width: 160rpx;
						height: 62rpx;
						line-height: 62rpx;
						text-align: center;
						background: #F8F8F8;
						font-size: 26rpx;
						color: #333;
						box-sizing: border-box;
						margin: 20rpx 20rpx 0 0;

						&:nth-child(4n+4) {
							margin-right: 0;
						}

						&:nth-child(-n+4) {
							margin-top: 0;
						}

						&.active {
							// color: #fff;
							border: 1px solid #F8C4D4;
						}
					}
				}
			}

			.receiver_box_text {
				width: 100%;

				.box_text_con {
					width: 100%;
					height: 232rpx;
					box-sizing: border-box;
					background: #F8F8F8;
					padding: 30rpx;
					font-size: 26rpx;
					color: #060606;
				}
			}

			.receiver_box_btn {
				width: 100%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				border-radius: 40rpx;
				background: #FA97B4;
				font-size: 32rpx;
				color: #fff;
				margin: 32rpx 0;
			}
		}
	}

	.index_box_con {
		.index_box_con_list {
			width: 160rpx;
			height: 62rpx;
			line-height: 62rpx;
			text-align: center;
			background: #F8F8F8;
			font-size: 26rpx;
			color: #595959;
			box-sizing: border-box;

			input {
				width: 100%;
				height: 100%;
			}

			&:nth-child(4n+4) {
				margin-right: 0;
			}
		}

		.index_box_con_list_active {
			border: 1px solid #F8C4D4;
		}
	}
</style>